<!--报警管理-->
<template>
  <div class="page-container main">
    <el-tabs model-value="first" class="myTable">
      <el-tab-pane label="报警配置" name="first">
        <AlarmConfig @showRight="showRight" @hideRight="dom.rightComponent.show = false;" />
      </el-tab-pane>
      <el-tab-pane label="提醒配置" name="second">
        <NoticeConfig @showRight="showRight" @hideRight="dom.rightComponent.show = false;" />
      </el-tab-pane>
    </el-tabs>

    <el-drawer :title="dom.rightComponent.title" v-model="dom.rightComponent.show" direction="rtl" class="demo-drawer" :close-on-click-modal="false">
      <component
        ref="rightComponent"
        :is="dom.rightComponent.companentName"
        :data="currentItem"
        @showRight="showRight"
        @hideRight="dom.rightComponent.show = false;"
      ></component>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent } from 'vue';
import { listActivity, getActivity, startActivity, stopActivity, delActivity } from '@/api/operation/activity/index';
import common from '@/utils/common.ts';

export default {
  components: {
    AlarmConfig: defineAsyncComponent(() => import('./alarmConfig.vue')),
    NoticeConfig: defineAsyncComponent(() => import('./noticeConfig.vue')),

    alarmEdit: defineAsyncComponent(() => import('./edit/alarmEdit.vue')),
    noticeEdit: defineAsyncComponent(() => import('./edit/noticeEdit.vue')),
    stationAlarmEdit: defineAsyncComponent(() => import('./edit/stationAlarmEdit.vue')),

    alarmInfo: defineAsyncComponent(() => import('./info/alarmInfo.vue')),
    noticeInfo: defineAsyncComponent(() => import('./info/noticeInfo.vue')),
    stationAlarmInfo: defineAsyncComponent(() => import('./info/stationAlarmInfo.vue'))
  },
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        status: null,
        activityType: null,
        activityName: '',
        pageNum: 1,
        pageSize: 20
      },
      tableData: [],
      currentItem: {},
      dom: {
        proxy: null,
        rightComponent: {
          show: false,
          title: '测试',
          companentName: 'Edit'
        }
      }
    };
  },
  mounted() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    this.dom.proxy = proxy;
  },
  created() {
    this.init();
  },
  methods: {
    init() {},

    showRight(companentName, title, data) {
      this.dom.rightComponent.show = true;
      this.currentItem = data;
      this.dom.rightComponent.title = title;
      this.dom.rightComponent.companentName = companentName;
      this.$nextTick(() => {
        if (this.$refs.rightComponent) this.$refs.rightComponent.init(data);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  overflow: auto;

  .myTable {
    width: 100%;
    height: calc(100% - 60px);
    overflow: auto;
  }

  .myPager {
    width: 100%;
    height: 50px;
    text-align: right;
  }
}
</style>

<style>
.el-drawer__header {
  margin-bottom: 5px !important;
  border-bottom: 1px solid var(--el-card-border-color, #e4e7ed);
  padding-bottom: 20px;
}

.el-drawer__body {
  padding: 10px !important;
}

.el-input-number__decrease,
.el-input-number__increase {
  display: none;
}

.el-input-number {
  width: 100%;
}

.el-select {
  min-width: 150px;
}
</style>